import { Image } from "@nextui-org/image";

const serverList = [
  {
    id: 1, 
    pic: 'server-1.png' 
  }, {
    id: 2, 
    pic: 'server-2.png' 
  }, {
    id: 3, 
    pic: 'server-3.png' 
  }, {
    id: 4, 
    pic: 'server-4.png' 
  }
]

export default function Server() {
  return ( 
    <div className="mb-24">
      <h2 className='text-center font-sans text-slate-800'>
        <p className='text-5xl font-bold  mt-28'>完善的客户服务体系</p>
        <p className='text-3xl font-medium mt-6'>全生命周期陪伴 助力客户成功</p>
      </h2>
      <div className="grid grid-cols-4 px-40 py-12 justify-center">
        {
        serverList.map(s => (
          <div className="ml-4 px-16" key={s.id}>
            <Image alt="Tasks logo" src={s.pic} />
          </div>
        ))
        }
      </div>
    </div>
  );
}
